<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable vue/html-indent -->
<template>
    <Dialog :app-dialog="appDialog">
        <div class="growthIntegralContainer">
            <el-form ref="formRef" :model="form" :inline="false">
                <el-form-item
                    :rules="[
                        { required: true, message: `请输入变动的${TYPE_NAMES[appDialog.type]}数`, trigger: 'blur' },
                        { pattern: /^\+?[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
                    ]"
                    :label="`请填写需要手动增减的${TYPE_NAMES[appDialog.type]}`"
                    prop="experience">
                    <div class="el-form-item_container">
                        <el-select v-model="form.change_type">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-input
                            v-model.number="form.experience"
                            type="number"
                            :placeholder="`变动的${TYPE_NAMES[appDialog.type]}数`"
                            @change="handleChangeValue"></el-input>
                        <div class="text">{{ TYPE_NAMES[appDialog.type] }}</div>
                    </div>
                </el-form-item>
                <el-form-item
                    label="变动原因"
                    prop="remark"
                    :rules="[
                        { required: true, message: `请输入变动原因`, trigger: 'blur' },
                        { min: 0, max: 50, message: '最多输入50个字符', trigger: 'blur' }
                    ]">
                    <el-input
                        v-model="form.remark"
                        class="remark-input"
                        type="textarea"
                        placeholder="请输入变动原因"
                        show-word-limit
                        :rows="3"
                        maxlength="50"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { reactive, defineExpose, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import Dialog from '@/components/Dialog.vue';

import { experienceCustom, pointsCustom } from '@/api/member/memberList/index';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['submit']);

// 声明路由配置
const route = useRoute();

// 会员号
const memberNo = route.query.member_no || '';

/**
 * 校验积分或者成长值是否合法
 * @param val 当前输入的积分或者成长值
 */
const handleChangeValue = (val: any) => {
    val.replace(/[^\d]/g, '');
    if (val < 0) {
        form['experience'] = '1';
        form['points'] = '1';
    } else if (val > 99999999) {
        form['experience'] = '99999999';
        form['points'] = '99999999';
    } else {
        form['experience'] = val;
        form['points'] = val;
    }
};

/**
 * 变动的类型
 */
const TYPE_NAMES = {
    1: '积分',
    2: '成长值'
};

const formRef = ref(null);

/**
 * @description: 调整成长值
 * @param {*} data
 * @return {*}
 */
const experienceCustomFunc = async (data: any) => {
    const res = await experienceCustom(data);
    if (res) ElMessage.success('操作成功');
    visibleGrowth.value = false;
    emit('submit', res);
};

/**
 * @description: 调整积分
 * @param {*} data
 * @return {*}
 */
const pointsCustomFunc = async (data: any) => {
    const res = await pointsCustom(data);
    if (res) ElMessage.success('操作成功');
    visibleGrowth.value = false;
    emit('submit', res);
};

const cancelHandel = () => {
    visibleGrowth.value = false;
};
/**
 * 表单提交事件
 */
const submitHandel = async () => {
    if (!formRef.value) return;
    await formRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            if (appDialog.type == 1) {
                form['points'] = form['experience'];
                pointsCustomFunc(form);
            } else {
                experienceCustomFunc(form);
            }
        } else {
            throw new Error(`error submit! ${JSON.stringify(fields)}`);
        }
    });
};
const visibleGrowth = ref(false);
const appDialog = reactive({
    visible: visibleGrowth,
    title: '',
    width: '600px',
    type: 1, // 1积分2成长值
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});
const form = reactive({
    member_no: memberNo, // 会员号
    change_type: 'incr', //incr-加 decr-减
    experience: '', //成长值变动值
    points: '', //积分变动值
    remark: ''
});

/**
 * 变动类型
 */
const options = [
    {
        value: 'incr',
        label: '加'
    },
    {
        value: 'decr',
        label: '减'
    }
];

defineExpose({
    appDialog,
    visibleGrowth
});

/**
 * 表单重置为默认值
 */
watch(
    () => visibleGrowth.value,
    () => {
        form.member_no = memberNo;
        form.change_type = 'incr';
        form.experience = '';
        form.points = '';
        form.remark = '';
    }
);
</script>

<style scoped lang="scss">
.growthIntegralContainer {
    padding: 8px;
    :deep(.el-form-item) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .el-form-item__label {
            margin-bottom: 16px;
        }
    }

    .remark-input {
        width: 552px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #eaeaea;
    }

    .el-form-item_container {
        display: flex;
        flex-direction: row;
        :deep(.el-select) {
            width: 90px;
            height: 32px;
            border-radius: 4px;
            margin-right: 8px;
            .el-input--suffix {
                width: 90px;
            }
        }
        :deep(.el-input) {
            width: 360px;
            height: 32px;
            border-radius: 4px;
            margin-right: 4px;
        }
    }

    .text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
    }
}
</style>
